﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Admin</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./css/login.css" />
  </head>
  <body>
    <!-- 底部树 -->
    <div class="landscape"></div>
    <!-- 背景颜色 -->
    <div class="filter"></div>
    <!-- 粒子效果 -->
    <canvas id="canvas"></canvas>

    <div id="login">
      <!-- 猫头鹰控件 -->
      <div id="owl-login" class="login-owl">
        <div class="hand"></div>
        <div class="hand hand-r"></div>
        <div class="arms">
          <div class="arm"></div>
          <div class="arm arm-r"></div>
        </div>
      </div>
      <!-- 表单区域 -->
      <form>
        <h2>Admin Login</h2>
        <div class="username">
          <span class="iconfont icon-yonghuming"></span>
          <input type="text" name="username" placeholder="请输入用户名" />
          <span class="iconfont icon-duihao"></span>
        </div>
        <div class="pwd">
          <span class="iconfont icon-mima"></span>
          <input type="password" name="password" placeholder="请输入密码" />
          <span class="iconfont icon-chahao"></span>
        </div>
        <div class="btns">
          <a href="javascript:;" class="register">注册</a>
          <a href="javascript:;" class="login">登录</a>
        </div>
      </form>
    </div>

    <div id="register">
      <!-- 猫头鹰控件 -->
      <div id="owl-login" class="login-owl">
        <div class="hand"></div>
        <div class="hand hand-r"></div>
        <div class="arms">
          <div class="arm"></div>
          <div class="arm arm-r"></div>
        </div>
      </div>
      <!-- 表单区域 -->
      <form>
        <h2>Admin Register</h2>
        <div class="username">
          <span class="iconfont icon-yonghuming"></span>
          <input type="text" name="username" placeholder="请输入用户名" />
          <span class="iconfont icon-duihao"></span>
        </div>
        <div class="pwd">
          <span class="iconfont icon-mima"></span>
          <input type="password" name="password" placeholder="请输入密码" />
          <span class="iconfont icon-duihao"></span>
        </div>
        <div class="btns">
          <a href="javascript:;" class="register">返回登录</a>
          <a href="javascript:;" class="login">注册</a>
        </div>
      </form>
    </div>
    <script>
      const form = document.querySelector('form')
      const duihao = document.querySelector('.username span:last-child')
      const chahao = document.querySelector('.pwd span:last-child')
      // 校验用户名
      const username = document.querySelector('[name="username"]')
      username.addEventListener('change', updateUserName)
      function updateUserName() {
        // 规则
        const rules = /^[\u4e00-\u9fa5]{3,10}$/
        if (!rules.test(username.value)) {
          duihao.classList.remove('icon-duihao')
          duihao.classList.add('icon-chahao')
          return false
        } else {
          duihao.classList.remove('icon-chahao')
          duihao.classList.add('icon-duihao')
          return true
        }
      }
      updateUserName()

      // 校验密码
      const password = document.querySelector('[name="password"]')
      password.addEventListener('change', updatePassword)
      function updatePassword() {
        // 规则
        const rules = /^[a-zA-Z0-9-_+]{6,10}$/
        if (!rules.test(password.value)) {
          chahao.classList.remove('icon-duihao')
          chahao.classList.add('icon-chahao')
          return false
        } else {
          chahao.classList.remove('icon-chahao')
          chahao.classList.add('icon-duihao')
          return true
        }
      }

      updatePassword()
      // 登录
      const btns = document.querySelector('.btns')
      btns.addEventListener('click', function (e) {
        const obj = {
          userInfo: username.value,
          userInfoPassword: password.value,
        }
        if (e.target.tagName === 'A') {
          if (e.target.innerHTML === '登录') {
            e.preventDefault()
            location.href = './index.html'
            localStorage.setItem('username', JSON.stringify(obj.userInfo))
          }
        }
      })
    </script>
    <script src="./js/canvas.js"></script>
    <script src="./js/login.js"></script>
  </body>
</html>
